﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="./common/head :: head"></head>
<body style="background-color: #ecf0f1;">
<style type="text/css">
    .mylevel-row {
        background-color: #95a5a6;
    }

    .mylevel-row1 {
        background-color: #ecf0f1;
    }

    .dropdown-menu {
        min-width: 100px;
    }

    .dropdown-menu li {
        width: 100px;
    }
</style>

<script type="text/javascript" th:inline="javascript">
    var contextPath = [[${session.ctx}]];
    var username = [[${session.user.name}]];
    var userId = [[${session.user.id}]];
    $(function () {
        common.render("#cover,#editCover", userId);
        $('#catagroy').bootstrapTable({
            method: 'GET',
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded",
            cache: false,
            striped: true,                              //是否显示行间隔色
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            url: contextPath + '/category',
            height: $(window).height() - 110,
            width: $(window).width(),
            showColumns: true,
            pagination: true,
            queryParamsType: "other",
            // toolbar: "#toolbar",
            toolbarAlign: "left",
            queryParams: function (params) {
                var param = {
                    pn: params.pageNumber,
                    ps: params.pageSize,
                    name: params.searchText,
                    cover: $('#cover').val(),
                    parentId: -1,
                    parentName: username,
                    level: true
                }
                return param;
            },
            minimumCountColumns: 2,
            pageNumber: 1,        //初始化加载第一页，默认第一页
            pageSize: 10,            //每页的记录行数（*）
            pageList: [10, 25, 50, 100],       //可供选择的每页的行数（*）
            uniqueId: "id",      //每一行的唯一标识，一般为主键列
            showExport: true,
            exportDataType: 'all',
            search: true,
            searchTimeOut: 1500,
            searchOnEnterKey: true,
            responseHandler: function (data) {
                var data1 = {
                    total: data.totalCount,
                    rows: data.items
                }
                return data1;
            },
            columns: [{
                field: 'id',
                title: 'ID',
                width: '5%',
                visible: false,
                formatter: function (value, row, index) {
                    return row.id;
                }
            }, {
                field: 'name',
                title: '链接名称',
                align: 'center',
                valign: 'middle',
                width: '15%',
            }, {
                field: 'ancestors',
                title: '地址',
                align: 'left',
                valign: 'middle',
                width: '20%',
                formatter: function (value, row, index) {
                    return "<a target='_blank' href='"+value+"'>"+value+"</a>";
                }
            }, {
                field: 'parentName',
                title: '分享者',
                align: 'center',
                valign: 'middle',
                width: '20%',
            }, {
                field: 'description',
                title: '描述',
                align: 'left',
                valign: 'middle',
                width: '35%',
            }, {
                field: '',
                title: '操作',
                align: 'center',
                valign: 'middle',
                width: '10%',
                formatter: function (value, row, index) {
                    var ht = $("<div></div>").append($('#operDrop')[0].outerHTML);
                    ht.attr('data-id', row.id).attr("id", "");
                    ht.find('.my-collect').attr('onclick', "collectShow(" + row.id + ")").find(".collect-text");
                    return ht.html();
                }
            }]
        });

        common.render("#editCover", userId);
        $("#confirmSaveBtn").click(function (e) {
            $("#confirmForm").bootstrapValidator({
                live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
                excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的
                submitButtons: '#confirmSaveBtn',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面
                message: '验证失败',//好像从来没出现过
                feedbackIcons: {//根据验证结果显示的各种图标
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    name: {
                        validators: {
                            notEmpty: {//检测非空,radio也可用
                                message: '名称必须输入'
                            },
                        }
                    },
                    cover: {
                        validators: {
                            notEmpty: {//检测非空,radio也可用
                                message: '请选择分类'
                            },
                        }
                    },
                }
            }).on('success.form.bv', function (e) {//点击提交之后
                e.preventDefault();
                var row = $('#confirmModal').data("row");
                var data = $(e.target).serializeJSON();
                var data1 = $.extend({}, row, data);

                data1.priority =  row.id;//过滤已加入的
                data1.id = null;
                data1.parentName = username;
                data1.level = false;
                data1.created = null;
                data1.updated = null;

                http.add("category", data1, function (data) {
                    if (data.success) {
                        toastr.success('保存成功');
                        $('#confirmModal').modal('hide');
                        search();
                    } else {
                        toastr.warning('保存失败');
                        $('#confirmModal').modal('hide');
                    }
                });
            });
        });

    });

    function collectShow(id) {
        var row = $('#catagroy').bootstrapTable('getRowByUniqueId', id);
        $('#confirmModal').modal('show').data("row", row);
        row.cover='';
        $("#confirmForm").loadJson(row);
    }

    function search() {
        $('#catagroy').bootstrapTable('refresh');
    }


</script>
<div class="container-fluid">
    <header th:include="./common/header :: header"></header>
    <div class="row">
        <div th:include="./common/leftMenu :: leftMenu" class="col-md-3"></div>
        <div class="col-md-9">
            <table id="catagroy"></table>
        </div>
        <div id="toolbar">
            <form class="form-inline">
                <div class="form-group">
                    <label for="cover">分类：</label>
                    <select id="cover" class="form-control" onchange="search()" style="width: 150px;"></select>
                </div>
            </form>
        </div>
    </div>
    <div class="hide">
        <div id="operDrop" class="dropdown">
            <button type="button" class="btn btn-success my-collect"><span
                    class="glyphicon glyphicon-plus" aria-hidden="true">添加</span></button>
        </div>
    </div>

    <div class="modal fade bs-example-modal-sm" id="confirmModal" tabindex="-1" role="dialog"
         aria-labelledby="confirmModalLabel">
        <div class="modal-dialog bs-example-modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="confirmModalLabel">加入我的收藏</h4>
                </div>
                <form id="confirmForm">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="editName">名称</label>
                            <input type="text" class="form-control" id="editName" name="name" placeholder="链接名称">
                        </div>
                        <div class="form-group">
                            <label for="editCover">分类</label>
                            <select class="form-control" id="editCover" name="cover"></select>
                        </div>
                        <div class="form-group">
                            <label for="editAncestors">地址</label>
                            <textarea type="text" class="form-control" id="editAncestors" name="ancestors" rows="3" disabled="disabled"
                                      placeholder="http(s)://"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="editDescription">描述</label>
                            <input type="text" class="form-control" id="editDescription" name="description"
                                   placeholder="描述">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="confirmSaveBtn" type="submit" class="btn btn-success">确认</button>
                    </div>
                </form>
            </div>
            </form>
        </div>
    </div>
</div>
</div>
</body>
</html>